<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.main {
				height: 606px;
				width: 606px;
				border: 1px solid cyan;
				margin: 50px auto;
			}

			.main div {
				height: 200px;
				width: 200px;
				border: 1px solid black;
				float: left;
				background-image: url(img/bg.jpg);
				background-repeat: no-repeat;
			}
			.main div:hover{
			/* 	-webkit-transform: scale(0.9);
				-ms-transform: scale(0.9); */
				transform: scale(1.5);
			}
			
			.item1{
				background-position: 50px 50px;
			}

			.item2 {
				background-position: -152px 50px;
			}
			.item3{
				background-position: -354px 50px;
			}
			
			.item4{
				background-position: 50px -152px;
			}
			.item5{
				background-position: -152px -152px;
			}
			.item6{
				background-position: -354px -152px;
			}
			
			.item7{
				background-position: 50px -354px;
			}
			.item8{
				background-position: -152px -354px;
			}
			.item9{
				background-position: -354px -354px;
			}
			
		</style>
	</head>
	<body>
		<div class="main">
			<div class="item1"></div>
			<div class="item2"></div>
			<div class="item3"></div>
			<div class="item4"></div>
			<div class="item5"></div>
			<div class="item6"></div>
			<div class="item7"></div>
			<div class="item8"></div>
			<div class="item9"></div>

		</div>

	</body>
</html>
